<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" label-width="68px">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="处理时间" prop="createTime">
                        <el-date-picker v-model="createTime" type="daterange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="部门归属" prop="orgId">
                        <treeselect v-model="deptId" :options="deptOptions" :show-count="true" placeholder="请选择部门归属"
                            :default-expand-level="4" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="顾问" prop="updateBys">
                        <el-select v-model="userId" placeholder="顾问" clearable filterable>
                            <el-option v-for="user in sysUsersList" :key="user.userId" :label="user.nickName"
                                :value="user.userId" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-table v-loading="loading" :data="visitRecordList" @selection-change="handleSelectionChange" show-summary>
            <el-table-column label="顾问" align="center" prop="user_name" />
            <el-table-column label="上级发放" align="center" prop="above_total_count" />
            <el-table-column label="上级发放已处理" align="center" prop="above_total_followed_count" />
            <el-table-column label="上级发放未处理" align="center" prop="above_total_unfollow_count" >
              <template slot-scope="scope">
                <span class="report_span1" @click="custleveldataDetails(scope.row.above_unfollow_cust_ids)">{{ scope.row.above_total_unfollow_count }}</span>
              </template>
            </el-table-column>
            <el-table-column label="公共池获取" align="center" prop="self_total_count" />
            <el-table-column label="公共池获取已处理" align="center" prop="self_total_followed_count" />
            <el-table-column label="公共池获取未处理" align="center" prop="self_total_unfollow_count" >
              <template slot-scope="scope">
                <span class="report_span2" @click="custleveldataDetails(scope.row.self_unfollow_cust_ids)">{{ scope.row.self_total_unfollow_count }}</span>
              </template>
            </el-table-column>

        </el-table>
        <!-- 查看客户列表 -->
        <el-dialog :title="title" :visible.sync="open" class="dialogCust" width="96%" :fullscreen="modal" append-to-body :modal="modal" :destroy-on-close="modal">
          <cust-info-list :form.sync="form"></cust-info-list>
        </el-dialog>
    </div>
</template>

<script>
import { getCallCustDatas } from "@/api/crmsys/report/custStatics";
import { childrenAlldeptTree } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import {
    getAllDeptandUsers
} from "@/api/crmsys/custinfo/custinfo";
import CustInfoList from "@/components/crmSys/custInfoList";

export default {
    name: "CallCustDataStatics",
    components: { Treeselect, CustInfoList},
    data() {
        return {
            modal:false,
            title: '客户列表',
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 来访登记统计表格数据
            visitRecordList: [],
            // 是否显示弹出层
            open: false,
            deptId: null,
            userId: null,
            createTime: null,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                custId: null,
                custName: null,
                mobile: null,
                empName: null,
                empMobile: null,
            },
            // 表单参数
            form: {},
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            // 部门归属树选项
            deptOptions: [],
            sysUsersList: [],
            // 表单校验
            rules: {
            }
        };
    },
    created() {

        this.getDeptTree();
        this.getDeptAndUsers();
    },
    methods: {
        /** 查询来访登记统计列表 */
        getList() {
            if (this.createTime == null || this.createTime == "") {
                //必须选择时间
                this.$message.error("请选择要查询的处理时间！");
                return;
            }
            let userId = this.userId == null ? -1 : this.userId;
            let deptId = this.deptId == null ? -1 : this.deptId;
            this.loading = true;
            getCallCustDatas(this.createTime, userId, deptId).then(response => {
                this.visitRecordList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                custId: null,
                custName: null,
                mobile: null,
                empName: null,
                empMobile: null,
                createTime: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加来访登记统计";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateVisitRecord(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addVisitRecord(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 查询部门归属下拉树结构 */
        getDeptTree() {
            var dept = { deptId: this.$store.state.user.deptid }
            childrenAlldeptTree(dept).then(response => {
                this.deptOptions = response.data;
            });
        },
        /** 获取部门归属和人员信息 */
        getDeptAndUsers() {
            getAllDeptandUsers().then((response) => {
                this.sysUsersList = response.data.sysUsersList;
            });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('crmsys/visitRecord/export', {
                ...this.queryParams
            }, `visitRecord_${new Date().getTime()}.xlsx`)
        },
        custleveldataDetails(ids ) {
          //查询明细数据
          let inparams={};
          inparams.params={};
          inparams.params.ids=ids;
          inparams.pageNum=1;
          inparams.pageSize=10;
          this.$set(this.$data, 'form', inparams);
          this.open=true;
        },
    }
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/command.scss';
.report_span1 {
  color: blue;
  cursor: pointer;
}
.report_span2 {
  color: rgb(231, 62, 146);
  cursor: pointer;
}
</style>
